<template>
  <div class="page">
    <div class="header">
      <div class="header-left"></div>
      <div class="header-center">好看的颜色</div>
      <div class="header-right"></div>
    </div>
    <div class="content">
      <div class="colors">
        <div class="color" v-for="color of colors" :style="'background:' + color"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getColors, getRGBColors, getRGBAColors } from '@/api/colors'

  export default {
    data() {
      return {
        colors: []
      }
    },
    created() {
      this.colors = getColors()
      console.log(this.colors.length)
    }
  }
</script>

<style lang="stylus" scoped>
  .page
    width : 100%
    height : 100%
  .header
    display : flex
    align-items : center
    height : 45px
    border-bottom : 1px solid #ddd
    .header-left
      width: 45px
      text-align : center
    .header-right
      width: 45px
    .header-center
      flex-grow: 1
      text-align : center

  .colors
    display : flex
    flex-wrap : wrap
    padding: 15px
    .color
      width : calc((100% - 30px) / 4)
      height : 70px
      box-sizing : border-box
      margin-right: 10px
      margin-bottom: 10px
      &:nth-child(4n)
        margin-right: 0

</style>

